<template>
	<!-- 刘振坤 2023年4月3号 -->
	<!-- 限时选购 -->
	<view style="width: 96%;margin-left: 2%;">
		<!-- 搜索框 -->
		<view style="width: 100%;margin-top: 10px;">
			<u-search v-model="selectValue" @change="selectCommodity" :clearabled="true" searchIconColor="red"></u-search>
		</view>
		<view v-show = "selectShow" style="width:340px;height:150px;background-color: white;position:absolute;top:50px;margin-left: 10px;z-index: 1;">
			<view style="width:340px;height: 25px;margin-bottom: 8px;background-color:beige ;" v-for="item in selectResultList" @click="toCommodityDetail(item)">
				<p v-if="item.id" style="font-size:13px;font-weight: bold;">{{item.commodityName|ellipsisTitle}}</p>
				<p v-if="item.did" style="font-size:13px;font-weight: bold;">{{item.diyName|ellipsisTitle}}</p>
			</view>
		</view>
		<!-- 商品信息列表 -->
		<view v-for="(item, index) in queryFlashKillInformationList" :key="index" style="width: 100%;margin-top: 20px;height: 140px;background-color: #fff;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);border-radius: 20px;">
			<view @click="toFlashBuyingPage(item.id)" style="width: 40%;height: 140px;float: left;">
				<img :src="'http://101.43.223.224:8765/image/getImageById?id='+(item.imageId==null?6:item.imageId.split(',')[0])" style="width: 90%;height: 120px;margin-top: 10px;margin-left: 5%;border-radius: 20px;">
			</view>
			<view @click="toFlashBuyingPage(item.id)" style="width: 60%;height: 140px;float: left;">
				<view style="width: 95%;height: 30px;margin-top: 10px;line-height: 30px;overflow: hidden;">
					<span style="font-size: 16px;">{{ item.commodityName }}</span>
					<span ></span>
				</view>
				<view style="width: 95%;height: 30px;margin-top: 5px;line-height: 30px;">
					<view style="float: left;">
						<span style="font-size: 14px;">剩余数量：</span>
						<span style="color: red;font-size: 18px;">{{ item.seckillStock }}</span>	
					</view>
					<view style="float: right;">
						<!-- <u-icon name="photo"></u-icon> -->
						<!-- <u-icon name="shopping-cart" color="red" size="30"></u-icon> -->
					</view>
				</view>
				<view style="width: 95%;height: 50px;margin-top: 5px;line-height: 50px;">
					<view style="float: left;width: 40%;">
						<span style="color: red;font-size: 18px;margin-right: 5px;">￥{{ item.seckillPrice }}</span>
						<span style="color: gray;font-size: 14px;text-decoration: line-through;">￥{{ item.price }}</span>
					</view>
					<view>
						<u-button customStyle="height:30px;width:60px;position: relative;top:10px;left:30px;" text="抢购" color="red" ></u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部提示 -->
		<view style="width: 100%;margin-top: 50px;float: left;">
			<view style="width: 37.6%;float: left;">
				<u-line color="grey"></u-line>
			</view>
			<view style="float: left;margin-left: 2.5%;margin-right: 2%;font-size: 14px;position: relative;top: -10px;color: grey;">已经到底了</view>
			<view style="width: 37.5%;float: left;">
				<u-line color="grey"></u-line>
			</view>
		</view>
		<view style="width: 100%;height: 30px;float: left;"></view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 搜索栏框值
				selectValue:'',
				// 搜索栏搜索结果
				selectResultList:'',
				// 搜索栏结果框
				selectShow:false,
				// 秒杀信息列表
				queryFlashKillInformationList: []
			}
		},
		onLoad() {
			this.queryFlashKillInformation()
		},
		methods: {
			// 搜索栏查询
			selectCommodity(){
				if(this.selectValue ==''){
					this.selectShow = false
					return
				}
				this.$myRequest({
					url:'/handworkDiy/selectCommodity',
					data:{
						selectValue:this.selectValue,
					}
				}).then(res=>{
					this.selectResultList = res.data.data
					this.selectShow = true
				})
			},
			// 点击关闭搜索栏结果框
			closeSelect(){
				this.selectShow = false
			},
			// 跳转对应的商品详情
			toCommodityDetail(item){
				this.selectShow = false
				if(item.id == null)
				{
					// 跳转DIY详情页面
					uni.navigateTo({
						url: '/pages/diy/DIYView?id='+item.did
					})
				}
				if(item.did == null){
					uni.navigateTo({
						//保留当前页面，跳转到应用内的某个页面
						url: '/pages/goods/GoodsView?id='+item.id
					})
				}
			},
			// 查询秒杀表中是信息方法
			queryFlashKillInformation(){
				this.$myRequest({
					url: '/limitedTimePurchase/queryFlashKillInformation',
					// data: {
					// 	commodityName: this.commodityName
					// }
				}).then(res=>{
					this.queryFlashKillInformationList = res.data.data
				})
			},
			// 跳转至抢购详情页面
			toFlashBuyingPage(id){
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/index/FlashBuyingPage?id='+id
				})
			},
		},
		// 显示字段超出相应长度后截取 可设置多个
		  filters: {
			ellipsis(value) {
			  if (!value) return "";
			  if (value.length > 30) {
				return value.slice(0, 30) + "...";
			  }
			  return value;
			},
			ellipsisTitle(value) {
			  if (!value) return "";
			  if (value.length > 25) {
			  // 截取长度
				return value.slice(0, 25) + "...";
			  }
			  return value;
			},
		  },
		onShow() {
			this.selectShow = false
			this.selectValue = ''
		}
	}
</script>
<style>
</style>
